<template>
  <div>
    <el-dialog
      title="添加商品"
      :visible.sync="showDialog"
      width="900px"
      :before-close="closeDialog"
    >
      <div class="content">
        <el-form
          :inline="true"
          :model="formData"
          ref="formData"
          class="demo-form-inline"
        >
          <el-form-item prop="productName">
            <el-input
              v-model="formData.productName"
              placeholder="请输入商品名称"
              size="mini"
            />
          </el-form-item>
          <el-form-item prop="productType">
            <el-select
              v-model="formData.productType"
              placeholder="请选择商品类型"
              size="mini"
            >
              <el-option label="商城商品" value="MALL"></el-option>
              <el-option label="预定商品" value="BOOKING"></el-option>
              <el-option label="餐饮商品" value="CAN_YIN"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="getData(1)"
              >搜索</el-button
            >
            <el-button size="mini" type="" @click="resetForm('formData')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" height="400">
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="price" label="分类">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.categoryName" :key="item"
                >{{ item
                }}{{
                  index == scope.row.categoryName.length - 1
                    ? ""
                    : "&nbsp;&nbsp;>&nbsp;&nbsp;"
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="价格（元）">
            <template slot-scope="scope">
              {{ (scope.row.price / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              {{ typeOptions[scope.row.productType] }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot="header" slot-scope="scope">
              <el-checkbox v-model="isAll" @change="changeBox($event, '')">{{
                isAll ? "全不选" : "全选"
              }}</el-checkbox>
            </template>
            <template slot-scope="scope">
              <div>
                <el-checkbox
                  :value="scope.row.isSelect"
                  @change="changeBox($event, scope.row)"
                  >{{ scope.row.isSelect ? "已选择" : "选择" }}</el-checkbox
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination-direction
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="saveData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getProductsByType,
  getChooseProducts,
  productSaveOrUpdate,
} from "@/api/vip";
import { reject } from "lodash-es";
export default {
  data() {
    return {
      showDialog: false,
      formData: {
        productName: "",
        productType: "",
      },
      // 源数组
      isAll: false,
      tableData: [],
      paginationConfig: {
        direction: "center", // 分页位置
        layout: "total, sizes, prev, pager, next, jumper", // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10, // 每页条数-默认10
      },
      typeOptions: {
        MALL: "商城商品",
        BOOKING: "预定商品",
        CAN_YIN: "餐饮商品",
      },
      chooseProducts: [],
    };
  },
  methods: {
    openDialog(arr) {
      arr.forEach((item) => (item.isSelect = true));
      this.chooseProducts = JSON.parse(JSON.stringify(arr));
      this.getData();
      this.showDialog = true;
      // const loading = this.$loading({
      //   lock: true,
      //   text: "加载中",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      // getChooseProducts({}).then((res) => {
      //   if (res.code == 0) {
      //     loading.close();
      //     let { data } = res;
      //     data.forEach((item) => (item.isSelect = true));
      //     this.chooseProducts = data;
      //     console.log(this.chooseProducts)
      //     this.showDialog = true;
      // this.getData();
      //   } else {
      //     loading.close();
      //   }
      // });
    },
    closeDialog() {
      this.showDialog = false;
      this.resetForm("formData");
      this.paginationConfig.page = 1;
    },
    // 单选和全选事件
    changeBox(e, row) {
      if (row) {
        let { productId, productName, productType } = row;
        this.chooseProducts.forEach((item, index) => {
          if (
            item.productId == productId &&
            item.productName == productName &&
            item.productType == productType
          ) {
            item.isSelect = e;
          }
        });
        console.log(row);
      } else {
        this.isAll = e;
        this.changeAllSta(e);
      }
      this.$forceUpdate();

      this.isInclude();
    },
    // 判断是否全选
    isInclude() {
      let { tableData } = this,
        falg = true;
      if (tableData.length <= 0) {
        this.isAll = false;
        return;
      }
      this.tableData.forEach((item) => {
        if (!item.isSelect) {
          falg = false;
        }
      });
      this.isAll = falg;
    },
    // 全选和取消全选操作
    changeAllSta(e) {
      let { tableData, chooseProducts } = this;
      chooseProducts.forEach((item) => {
        tableData.forEach((itm, idx) => {
          if (
            item.productId == itm.productId &&
            item.productName == itm.productName &&
            item.productType == itm.productType
          ) {
            item.isSelect = e;
          }
        });
      });
    },
    getData(type) {
      if (type) this.paginationConfig.page = 1;
      let {
        formData: { productName, productType },
        paginationConfig: { pageSize, page },
        chooseProducts,
      } = this;
      let total = 0;
      let newArr = [];
      if (!productName && !productType) {
        newArr = chooseProducts;
      } else if (productName && !productType) {
        newArr = chooseProducts.filter((item) => {
          return item.productName.indexOf(productName) != -1;
        });
      } else if (productType && !productName) {
        newArr = chooseProducts.filter((item) => {
          return item.productType == productType;
        });
      } else {
        newArr = chooseProducts.filter((item) => {
          return (
            item.productType == productType &&
            item.productName.indexOf(productName) != -1
          );
        });
      }
      total = newArr.length;
      this.tableData = newArr.slice(
        page * pageSize - pageSize,
        page * pageSize
      );
      this.paginationConfig.total = total;
      this.isInclude();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.paginationConfig.page = 1;
      this.getData(1);
    },
    sizesChange() {
      this.getData(1);
    },
    pageChange() {
      this.getData();
    },
    saveData() {
      let { chooseProducts } = this;
      let isTrueArr = chooseProducts.filter(item=>item.isSelect == true)
      this.closeDialog();
      this.$emit("dialogClose", { type: "edit", chooseProducts:isTrueArr });
      this.resetForm("formData");
      // if (deleteIds.length <= 0) {
      //   this.closeDialog();
      //   this.$emit("dialogClose");
      //   deleteIds = [];
      //   this.resetForm("formData");
      //   this.$message({
      //     message: "操作成功",
      //     type: "success",
      //   });
      //   return;
      // }
      // productSaveOrUpdate({
      //   deleteIds,
      //   inviteConfigId,
      // }).then((res) => {
      //   if (res.code == 0) {
      //     this.closeDialog();
      //     this.$emit("dialogClose");
      //     deleteIds = [];
      //     this.resetForm("formData");
      //     this.$message({
      //       message: "操作成功",
      //       type: "success",
      //     });
      //   }
      // });
    },
  },
};
</script>